<template>
  <view class="navMenu">
    <!-- <template v-for="(navMenu, index) in navMenus">
      <view @click="handleItem(navMenu)" v-if="!navMenu.children">
        <view 
            :style="{ 
                'margin-left': navMenu.num === 1 ?( 0+'rpx') : (30 * navMenu.num + 'rpx'),
            }"
            :class="{ 'first_item': navMenu.num === 1 ? true : false }"
            class="item_style"
            >
            {{ navMenu.name }} ***** {{ navMenu.num }}
        </view>
      </view>
      <view v-if="navMenu.children">
        <template>
          <view 
            :style="{ 
                'margin-left': navMenu.num === 1 ?( 0+'rpx') : (30 * navMenu.num + 'rpx'),
            }" 
            :class="{ 'first_item': navMenu.num === 1 ? true : false }"
            class="item_style"
            @click="handleItem(navMenu)"
            > 
                {{ navMenu.name }} == {{ navMenu.num }} &&& {{  }}
            </view>
        </template>
        <NavMenu :navMenus="navMenu.children"></NavMenu>
      </view>
    </template> -->

    <!-- 'padding-left': menuItem.num === 1 ?( 0+'rpx') : (30 * (menuItem.num - 1) + 'rpx'), -->
    <view 
      class="sidebar_item" 
      :class="{ 'active': menuItem.checked }"
      :style="{ 
          'padding-left': menuItem.num === 1 ?( 10+'rpx') : (20 * (menuItem.num - 1) + 'rpx'),
        }"
      @click="handleClick(menuItem)">
      <view class="text">{{ menuItem.name }} </view>
      <view v-if="menuItem.children && menuItem.children.length > 0" class="down_arrow"></view>
    </view>

    <!-- v-if="menuItem.children && expanded" -->
    <view 
        v-if="menuItem.children && expanded"
      >
      <view v-for="(child, index) in menuItem.children" >
        <NavMenu 
          :menuItem="child" 
          :key="child.id"
          :menuPath="[...menuPath, index]"
          @menu-clicked="handleChildMenuClicked"
        ></NavMenu>
      </view>
    </view>


  </view>
</template>

<script>
export default {
  name: "NavMenu",
  // props: ["navMenus", 'menuItem'],
  props: {
    menuItem: {
      typeof: Object
    },
    menuIndex: {
      typeof: Number
    },
    menuPath: {
      typeof: Array
    }
  },
  data() {
    return {
        dataList: [],
        expanded: false
    };
  },
  methods: {
    handleClick(menuItem, index) {
      this.expanded = !this.expanded;
      this.$emit('menu-clicked', menuItem, this.menuIndex );
    },
    handleChildMenuClicked(menuItem, index) {
      this.$emit('menu-clicked', menuItem, this.menuIndex, index);
    }
  
  },
};
</script>

<style scoped lang="less">

.navMenu {
  .sidebar_item {
    position: relative;
    display: flex;
    align-items: center;
    border: 1rpx solid #ccc;
    height: 100rpx;
    padding-right: 70rpx;

    .text {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 30rpx;
    }

    .down_arrow {
      position: absolute;
      right: 40rpx;
      width: 0; 
      height: 0; 
      border-left: 20rpx solid transparent;
      border-right: 20rpx solid transparent;
      border-top: 20rpx solid #a7a5a5; /* 这里可以更改箭头的颜色 */
    }
  }
}

.item_style {
    color: #000;
    background: #efefef;
    display: flex;
    align-items: center;
    padding: 20rpx;
}

.active  {
  background-color: lightgray;
}
</style>
